import { useState } from 'react';
import DemoStateChild from './Child';
const DemoState1 = () => {
    const [count, setCount] = useState(0)
    const [userinfo, setUserinfo] = useState({
      name: 'zhangsan',
      age: 18,
      email: 'zhangsan@qq.com'
    })
    
    const handleCount = () => {
        // setCount(count+1)
        // setCount(() => count + 1) // 有一些复杂的逻辑需要处理的时候，我们传函数的方式
        setCount(() => {
           // 自己的逻辑代码
           if (count <5) {
             return count + 1
           } 
            return count + 5
           
        })
    }
    
    
    // state为引用类型
    const updateUserInfo = () => {
       setUserinfo(() => {
         return {
           ...userinfo,
           email: 'zhangsan@163.com'
         }
       })
    }
    return (<div>
        <h2>
            1. 语法
        </h2>
        <p>const [state, setState] = useState(initialState); </p>
        <h2>2. 修改state</h2>
        count: { count}
        <button onClick={handleCount}>count++</button>
        <h2>2.1 更新state调用setState有两种写法：</h2>
        <pre>
        setCount(count+1)<br/>
        {
        'setCount(() => count + 1)'
        }
        </pre>
        <h2>3. 如果状态不是一个基本类型，而是一个引用类型，使用函数式更新结合扩展运算符</h2>
        用户信息<br/>
        <pre>
          用户名：{ userinfo.name}<br/>
          邮箱：{ userinfo.email}<br/>
          年龄：{ userinfo.age}<br/>
        </pre>
        <button onClick={updateUserInfo}>更新email</button>
        <h2>4.改变state的初始值</h2>
        <DemoStateChild initCount={100} />
        <pre>
           {
             '使用useState(() => {xxx})'
           }
        </pre>
    </div>);
}

export default DemoState1;